<template>
    <div class="apply-detail">
        <div class="top">
            <div class="top-line">
                <div class="left">
                    <div class="sub-title">
                        <span>计量申请：{{ info.id }}</span>
                    </div>
                    <div class="tag">
                        <StateTag :id="info.status"></StateTag>
                        <span v-if="info.status === 1" style="font-size: 14px;">（待{{ info.currentApprover.approverLevel }}级审批）</span>
                    </div>

                </div>
                <!-- 详情操作按钮 -->
                <div v-if="pageType === 'detail'" class="right">
                    <!-- 待提交 -->
                    <div v-show="info.status === 0 " style="flex">
                        <BaseButton v-show="isSubmitUser()" v-permission="{ btnCode: 'dlyh_c85_d417_2' }" type="second" @click="handleEdit(info.id)"> 编辑 </BaseButton>
                        <BaseButton v-show="isSubmitUser()" v-permission="{ btnCode: 'dlyh_d416_e14_2' }" type="danger" @click="handleDelete(info.id)"> 删除 </BaseButton>
                    </div>
                    <!-- 审批中 -->
                    <div v-show="info.status === 1" style="flex">
                        <BaseButton v-show="isSubmitUser()" v-permission="{ btnCode: 'dlyh_d416_e15_2' }" @click="handlewithDraw(info.id)"> 撤销计量申请 </BaseButton>
                    </div>
                    <!-- 已撤销 -->
                    <div v-show="info.status === 4" style="flex">
                        <BaseButton v-show="isSubmitUser()" v-permission="{ btnCode: 'dlyh_c85_d417_2' }" type="second" @click="handleEdit(info.id)"> 编辑 </BaseButton>
                        <BaseButton v-permission="{ btnCode: 'dlyh_d416_e16_2' }" @click="handleSubmit(info.id)"> 提交审批 </BaseButton>
                        <BaseButton v-show="isSubmitUser()" v-permission="{ btnCode: 'dlyh_d416_e14_2' }" type="danger" @click="handleDelete(info.id)"> 删除 </BaseButton>
                    </div>
                    <!-- 审批通过 -->
                    <div v-show="info.status === 2" style="flex">
                        <BaseButton v-permission="{ btnCode: 'dlyh_d416_e17_2' }" @click="handleExport(info.id)"> 导出审批单 </BaseButton>
                    </div>
                    <!-- 审批驳回 -->
                    <div v-show="info.status === 3" style="flex">
                        <BaseButton v-show="isSubmitUser()" v-permission="{ btnCode: 'dlyh_c85_d417_2' }" type="second" @click="handleEdit(info.id)"> 编辑 </BaseButton>
                        <BaseButton v-permission="{ btnCode: 'dlyh_d416_e16_2' }" @click="handleSubmit(info.id)"> 提交审批 </BaseButton>
                    </div>
                </div>
                <!-- 审批操作按钮 -->
                <div v-show="pageType === 'approve' && isApproveNode() && info.status === 1" class="right">
                    <!-- 审批驳回 -->
                    <div style="flex">
                        <BaseButton v-permission="{ btnCode: 'dlyh_c86_d420_2' }" type="second" @click="handleReject(info.id)"> 审批驳回 </BaseButton>
                        <BaseButton v-permission="{ btnCode: 'dlyh_c86_d420_2' }" @click="handleApprove(info.id)"> 审批通过 </BaseButton>
                    </div>
                </div>
            </div>
        </div>
        <!-- 审批步骤,全部放开了 -->
        <div class="step">
            <div class="approve-step">
                <div 
                v-for="(item,index) in info.approvalProcessList"  
                :key="`approve-step-${index}`" 
                :class="[
                    'step-item', 
                    item.finished ? 'step-item-active':'step-item-normal', 
                    item.description==='审批中止'?'step-item-broke':'', item.description==='审批驳回'?'step-item-reject':''
                ]"
                >
                    {{ item.description }}
                    <div class="info">
                        <div class="username">{{ item.operatorName }}</div>
                        <div class="departname">{{ item.operatorOrgName }}</div>
                    </div>
                </div>
              
                <!-- 审批中 -->
                <div v-if="info.status === 1 " :key="info.approvalProcessList.length" :class="['step-item','step-item-normal']">审批完成</div>
                <!-- 审批通过 -->
                <div v-if="info.status === 2" :key="info.approvalProcessList.length" :class="['step-item', 'step-item-active']">审批完成</div>
            </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基础信息" name="0">
                <BaseInfo ref="base-info" :info="info"></BaseInfo>
            </el-tab-pane>
            <el-tab-pane label="工程数量汇总" name="1">
                <ProjectSummary ref="project-summary" :step-btn-show="false"></ProjectSummary>
            </el-tab-pane>
            <el-tab-pane label="工程数量清单" name="2">
                <ProjectInventory ref="project-inventory" :step-btn-show="false"></ProjectInventory>
            </el-tab-pane>
            <el-tab-pane label="养护记录列表" name="3">
                <RecordsList ref="records-list" :form="formData" :step-btn-show="false"></RecordsList>
            </el-tab-pane>
        </el-tabs>
        <withDrawDialog ref="withdraw-dialog" @updateData="getDetail"></withDrawDialog>
        <Approve ref="approve" @updateData="getDetail"></Approve>
        <Reject ref="reject" @updateData="getDetail"></Reject>

        <!-- 无签名提示 -->
        <EsignatureTip ref="esignature-tip" :type-name="typeName"></EsignatureTip>
    </div>
</template>
<script>
import BaseInfo from './BaseInfo.vue'
import RecordsList from './RecordsList.vue'
import ProjectInventory from '../add/ProjectInventory.vue'
import ProjectSummary from '../add/ProjectSummary.vue'
import { ApplicationModel, UserModel } from '@/models'
import StateTag from '../components/StateTag.vue'
import reconfirm from '@/utils/reconfirm'
import withDrawDialog from '../components/WithDraw.vue'
// 审批
import Approve from '../../metrological-approval/components/Approve.vue'
import Reject from '../../metrological-approval/components/Reject.vue'
// 导出
import { ApplicationApi } from '@/api'
import downLoad from '@/utils/blob-download'
export default {
    components: {
        BaseInfo,
        RecordsList,
        ProjectInventory,
        ProjectSummary,
        StateTag,
        withDrawDialog,
        Approve,
        Reject
    },
    data() {
        return {
            activeName: 0,
            info: {
                status: 0,
                currentApprover: {
                    approverLevel: 0
                }
            },
            id: '',
            model: new ApplicationModel(),
            formData: {},
            pageType: 'detail',
            userModel: new UserModel(),
            typeName: '审批'
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.user.avatar || {}
        }
    },
    created() {
        const { id, pageType } = this.$route.query
        if (id) {
            this.id = id
            this.getDetail()
        }
        // detail  approve
        if (pageType) {
            this.pageType = pageType
        }
    },
    methods: {
        // 编辑
        handleEdit(id) {
            this.$router.push({
                path: './edit',
                query: {
                    id: id,
                    pageType: 'edit'
                }
            })
        },
        // 删除
        handleDelete(id) {
            reconfirm({
                text: '确定删除该计量申请单？删除后无法恢复请谨慎操作。',
                callback: () => {
                    return this.model.applyDelete({ id }).then(() => {
                        this.$message.success('删除成功!')
                        this.$router.push({
                            path: './index'
                        })
                    })
                }
            })
        },
        // 撤销
        handlewithDraw(id) {
            this.userModel.getHasUserInfo().then(res => {
                if (!res.esignature) {
                    this.typeName = '撤销'
                    this.$refs['esignature-tip'].visible = true
                    this.$refs['reject'].signatureShowTip = false
                } else {
                    this.$refs['withdraw-dialog'].form.id = id
                    this.$refs['withdraw-dialog'].visible = true
                }
            })
        },
        // 提交
        handleSubmit(id) {
            this.model.applySubmit({id: id}).then(res => {
                this.$message.success('操作成功!')
                this.getDetail()
            })
        },
        // 导出审批单
        handleExport(id) {
            this.exportLoading = true
            const path = ApplicationApi.spdPath
            const params = {
                id: id,
            }
            downLoad(path, {...params}, '', 'Excel', () => {
                this.exportLoading = false
            })
        },
        getDetail() {
            this.model.applyDetail({id: this.id}).then(res => {
                // console.log(res)
                this.info = res
                // 养护记录列表  查数据使用
                this.formData = {
                    type: res.type, 
                    cycle: res.cycle, 
                    constructionUnitId: res.constructionUnitId,
                    highwayCode: res.highwayCode
                }
            })
        },
        handleClick(val) {
            // 工程汇总
            if (val.name === '1') {
                this.$refs['project-summary'].id = this.id
                this.$refs['project-summary'].getList()
            } 
            // 工程数量清单
            if (val.name === '2') {
                this.$refs['project-inventory'].id = this.id
                this.$refs['project-inventory'].getList()
            }
            // 选择养护记录
            if (val.name === '3') {
                this.$refs['records-list'].id = this.id
                this.$refs['records-list'].list = this.info.maintRecordList || []
                this.$refs['records-list'].classPageList()
            }
        },
        // 审批驳回
        handleReject(id) {
            this.userModel.getHasUserInfo().then(res => {
                if (!res.esignature) {
                    this.typeName = '审批'
                    this.$refs['esignature-tip'].visible = true
                    this.$refs['reject'].signatureShowTip = false
                } else {
                    this.$refs['reject'].form.id = id
                    this.$refs['reject'].visible = true
                }
            })
        },
        // 审批驳回
        handleApprove(id) {
            this.userModel.getHasUserInfo().then(res => {
                if (!res.esignature) {
                    this.typeName = '审批'
                    this.$refs['esignature-tip'].visible = true
                    this.$refs['reject'].signatureShowTip = false
                } else {
                    this.$refs['approve'].form.id = id
                    this.$refs['approve'].visible = true
                }
            })
        },
        // 是否是当前审批节点
        isApproveNode() {
            const userId = this.userInfo.id
            if (this.info.currentApprover) {
                if (Number(this.info.currentApprover.approverId) === Number(userId)) {
                    return true
                } else {
                    return false
                }
            } else {
                return false
            }
        },
        // 是否是当前提交的用户,  删除和撤回需限制
        isSubmitUser() {
            if (Number(this.userInfo.id) === Number(this.info.applicantId)) {
                return true
            } else {
                return false
            }
        }

    }
}
</script>
<style scoped lang="scss">

.apply-detail{
    height: 100%;
    width: 100%;
    .top{
        width: 100%;
        padding-bottom: 24px ;
        border-bottom: 1px solid rgba(131, 145, 178, 0.1);
        margin-bottom: 24px;
        .top-line{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .bottom-line{
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-top: 8px;
            .item{
                display: flex;
                margin-right: 24px;
            }
        }
        .left{
            display: flex;
            .tag{
                display: flex;
                align-items: center;
                margin-left: 32px;
            }
        }
    }
    .step{
        margin-bottom: 60px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .approve-step{
            display: flex;
            .step-item-active{
                background: #0162FF;
                color: #fff;
                
            }
            .step-item-normal{
                background: #ebe9e9;
                color: #444;
            }
            .step-item-reject{
                background: #ed4845;
                color: #fff;
            }
            .step-item-broke{
                background: #ffa60f;
                color: #fff;
            }
            .step-item:last-of-type{
                &::after{
                    display: none;
                }
            }
            .step-item:first-of-type{
                &::before{
                    display: none;
                }
            }
            .step-item{
                height: 60px;
                width: 200px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                margin-left: 30px;
                margin-right: 2px;
                // 左边裁剪
                &::before{
                    content:"";
                    display: block;
                    width: 30px;
                    height: 60px;
                    background: inherit;
                    -webkit-clip-path: polygon(0px 0px, 30px 0px ,30px 60px, 0px 60px, 30px 30px, 0px 0px);
                    clip-path: polygon(0px 0px, 30px 0px ,30px 60px, 0px 60px, 30px 30px, 0px 0px);
                    position: absolute;
                    top: 0px;
                    left: -30px;
                }
                // 右边三角
                &::after{
                    content:"";
                    display: block;
                    width: 30px;
                    height: 60px;
                    background: inherit;
                    -webkit-clip-path: polygon(0px 0px, 30px 30px, 0px 60px);
                    clip-path: polygon(0px 0px, 30px 30px, 0px 60px);
                    position: absolute;
                    top: 0px;
                    right: -30px;
                }
            }
            .info{
               position: absolute;
               color: #444;
               top: 68px;
               left: 0px;
               font-size: 14px;
               .username{
                 font-weight: 600;
               }
            }
        }
    }
}

</style>
